<!--
 * @Description: 门户网站头部的组件
 * @Author: charles
 * @Date: 2021-07-01 10:12:43
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-07-15 23:26:08
-->
<template>
  <div>
    <div class="kongdiv" style="height: 70px"></div>
    <div class="header">
      <div class="wrapper">
        <div class="logo"><img :src="logo" alt="" /></div>
        <div class="title" @click="toHome">{{ name }}</div>
        <ul class="nav">
          <li @click="toList(c.id, c.name)" v-for="c in categories" :key="c.id">
            <a href="javascript:void(0)">{{ c.name }}</a>
          </li>
        </ul>
        <div class="phone" @click="toContact">关于我们</div>
      </div>
    </div>
  </div>
</template>
<script>
import { get } from "../../utils/request";
export default {
  // 数据
  data() {
    return {
      name: "博客站",
      logo: "博客站",
      categories: [],
    };
  },
  // 生命周期
  created() {
    this.queryName();
    this.queryLogo();
    this.loadCategories();
  },
  // 方法
  methods: {
    loadCategories() {
      let url = "/index/category/findAll";
      get(url).then((resp) => {
        this.categories = resp.data;
      });
    },
    // 查询logo
    queryLogo() {
      let url = "/index/findByKey";
      get(url, { name: "logo" }).then((resp) => {
        if (resp.data) {
          this.logo = resp.data.val;
        }
      });
    },
    // 查询门户网站名称
    queryName() {
      let url = "/index/findByKey";
      get(url, { name: "name" }).then((resp) => {
        if (resp.data) {
          this.name = resp.data.val;
        }
      });
    },
    toContact() {
      this.$router.push({ path: "/contact" });
    },
    toHome() {
      this.$router.push({ path: "/" });
    },
    toList(id, name) {
      this.$router.push({
        path: "/list",
        query: {
          categoryId: id,
          name,
        },
      });
    },
  },
};
</script>
<style lang="scss" scoped>
// 头部
.header {
  width: 100%;
  height: 60px;
  position: fixed;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
  top: -5px;
  z-index: 99;
  color: #fff;
  // 居中容器
  .wrapper {
    width: 90%;
    margin: 0 auto;
  }
  .kongdiv {
    width: 100%;
    height: 60px;
  }
  padding: 5px 0;
  .wrapper::after {
    clear: both;
    content: "";
    display: block;
  }
  .logo,
  .title,
  .nav,
  .phone {
    height: 60px;
    line-height: 60px;
    cursor: pointer;
  }
  .logo {
    width: 60px;
    border-radius: 50%;
    color: #fff;
    text-align: center;
    overflow: hidden;
    float: left;
  }
  .logo img {
    width: 60px;
    height: 60px;
  }

  .title {
    float: left;
    padding: 0 1em;
    font-weight: bold;
    font-size: 20px;
  }
  .nav {
    margin: 0;
    padding: 0;
    float: left;
    & > li {
      float: left;
      padding: 0 20px;
      text-align: center;
      a {
        text-decoration: none;
        color: #fff;
      }
    }
  }
  .nav::after {
    content: "";
    display: block;
    clear: both;
  }

  .phone {
    float: right;
  }
}
</style>